<template>
    <div>
        <div class="section">
            <div class="location">
                <span>当前位置：</span>
                <a href="/index.html">首页</a> &gt;
                <a href="/cart.html">购物车</a>
            </div>
        </div>

        <div class="section">
            <div class="wrapper">
                <div class="bg-wrap">
                    <!--购物车头部-->
                    <div class="cart-head clearfix">
                        <h2>
                            <i class="iconfont icon-cart"></i>我的购物车</h2>
                        <div class="cart-setp">
                            <ul>
                                <li class="first active">
                                    <div class="progress">
                                        <span>1</span>
                                        放进购物车
                                    </div>
                                </li>
                                <li class="active">
                                    <div class="progress">
                                        <span>2</span>
                                        填写订单信息
                                    </div>
                                </li>
                                <li class="last">
                                    <div class="progress">
                                        <span>3</span>
                                        支付/确认订单
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--购物车头部-->
                    <el-form :model="order" :rules="rules" ref="orderForm" label-width="100px" class="demo-ruleForm">
                        <h2 class="slide-tit">
                            <span>1、收货地址</span>
                        </h2>
                        <div id="orderForm" name="orderForm" url="">
                            <div class="form-box address-info">
                                <dl class="form-group">
                                    <el-form-item label="收货人姓名" prop="accept_name">
                                        <el-input style="width:500px" v-model="order.accept_name"></el-input>
                                    </el-form-item>
                                </dl>
                                <dl class="form-group">
                                    <el-form-item label="所属地区" prop="area">
                                        <v-distpicker 
                                        :province="order.area.province.value" 
                                        :city="order.area.city.value" 
                                        :area="order.area.area.value"
                                        @selected="selectedArea"
                                        ></v-distpicker>  
                                    </el-form-item>

                                    
                                </dl>
                                <dl class="form-group">
                                    <el-form-item label="详细地址" prop="address">
                                        <el-input  style="width:500px" v-model="order.address"></el-input>
                                    </el-form-item>
                                </dl>
                                <dl class="form-group">
                                   <el-form-item label="手机号码" prop="mobile">
                                        <el-input  style="width:500px" v-model="order.mobile"></el-input>
                                    </el-form-item>
                                </dl>

                                <dl class="form-group">
                                    <el-form-item label="邮箱" prop="email">
                                        <el-input  style="width:500px" v-model="order.email"></el-input>
                                    </el-form-item>
                                </dl>
                                <dl class="form-group">
                                    <el-form-item label="邮政编码" prop="post_code">
                                        <el-input  style="width:200px" v-model="order.post_code"></el-input>
                                    </el-form-item>
                                </dl>
                            </div>
                            <h2 class="slide-tit">
                                <span>2、支付方式</span>
                            </h2>
                            <ul class="item-box clearfix">
                                <!--取得一个DataTable-->
                                <li>
                                    <label>                                    
                                        <el-radio v-model="order.payment_id" label="6">在线支付</el-radio>
                                        <em>手续费：0.00元</em>
                                    </label>
                                </li>
                            </ul>
                            <h2 class="slide-tit">
                                <span>3、配送方式</span>
                            </h2>
                            <ul class="item-box clearfix">
                                <!--取得一个DataTable-->
                                <el-radio-group v-model="order.express_id" @change="expressChange">
                                    <li>
                                        <label>
                                            <el-radio label="1">顺丰快递(20元)</el-radio>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <el-radio label="2">圆通快递(10元)</el-radio>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <el-radio label="3">邮政快递(8元)</el-radio>
                                        </label>
                                    </li>
                                </el-radio-group>
                            </ul>
                            <h2 class="slide-tit">
                                <span>4、商品清单</span>
                            </h2>
                            <div class="line15"></div>
                            <table width="100%" border="0" align="center" cellpadding="8" cellspacing="0" class="cart-table">
                                <tbody>
                                    <tr>
                                        <th colspan="2" align="left">商品信息</th>
                                        <th width="84" align="left">单价</th>
                                        <th width="84" align="center">购买数量</th>
                                        <th width="104" align="left">金额(元)</th>
                                    </tr>
                                    <tr v-for="item in orderGoodsList" :key="item.id">
                                        <td width="68">
                                            <a target="_blank" href="/goods/show-89.html">
                                                <img :src="item.img_url" class="img" style="width:50px;height:50px">
                                            </a>
                                        </td>
                                        <td>
                                            <a target="_blank" href="/goods/show-89.html">{{item.title}}</a>
                                        </td>
                                        <td>
                                            <span class="red">
                                                ￥{{item.sell_price}}
                                            </span>
                                        </td>
                                        <td align="center">{{item.buycount}}</td>
                                        <td>
                                            <span class="red">
                                                ￥{{item.sell_price * item.buycount}}
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="line15"></div>
                            <h2 class="slide-tit">
                                <span>5、结算信息</span>
                            </h2>
                            <div class="buy-foot clearfix">
                                <div class="left-box">
                                    <dl>
                                        <dt>订单备注(100字符以内)</dt>
                                        <dd>
                                            <textarea name="message" v-model="order.message" class="input" style="height:35px;"></textarea>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="right-box">
                                    <p>
                                        商品
                                        <label class="price">{{getTotalCount}}</label> 件&nbsp;&nbsp;&nbsp;&nbsp; 
                                        商品金额：￥
                                        <label id="goodsAmount" class="price">{{getGoodsAmount}}</label> 元&nbsp;&nbsp;&nbsp;&nbsp;
                                    </p>
                                    <p>
                                        运费：￥
                                        <label id="expressFee" class="price">{{order.expressMoment}}</label> 元
                                    </p>
                                    <p class="txt-box">
                                        应付总金额：￥
                                        <label id="totalAmount" class="price">{{getGoodsAmount + order.expressMoment}}</label>
                                    </p>
                                    <p class="btn-box">
                                        <el-button type="primary">返回购物车</el-button>
                                        <el-button type="success" @click="goToPay">确认提交</el-button>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
 
    </div>
</template>

<style scoped>

</style>

<script>

import VDistpicker from 'v-distpicker'
import {getLocalGoods} from '../../common/localStorageTool'
export default {
  data() {
    //自定义验证规则
    var checkMobile = (rule, value, callback) => {
        if (!value) {
          return callback(new Error("手机号码不能为空"));
        }else {
            var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
          if (!myreg.test(value)) {
            callback(new Error("请输入正确的手机号"));
          } else {
            callback();
          }
        }
    };
    return {
        //最后几步
        //1.设置一个bool值
        isSubmit:false,

        //在订单页面,展示商品的信息
        orderGoodsList:[],
        order: {
            accept_name: "5555555",
            address: "长丰工业园",
            mobile: "13812345678",
            email: "abc@162.com",
            post_code: "528000",
            payment_id:'6',//在线支付
            express_id:'1',//快递方式
            expressMoment:20,//快递费用,默认20元
            goodsAmount:0, //商品的总价格,除开了快递费用
            message:"请尽快发货",
            goodsids:null, //购买商品的ids
            cargoodsobj:null, //购买商品的详细信息
            area:{
                "province": {
                    "code": "130000",
                    "value": "河北省"
                },
                "city": {
                    "code": "130300",
                    "value": "秦皇岛市"
                },
                "area": {
                    "code": "130322",
                    "value": "昌黎县"
            },
        }
      },
      
      rules: {
        accept_name: [
          { required: true, message: "请输入用户姓名", trigger: "blur" }
        ],
        address: [
            { required:true, message: "请输入详细地址",  trigger: "blur" }
        ],
        mobile: [
            { required:true, validator: checkMobile, trigger: "blur" }
        ],
        area: [
            { required:true, message: "请选择地址", trigger: "blur" }
        ],
      }
    };
  },
  components: { VDistpicker },
  computed:{
      //获取总价格
        getGoodsAmount(){
            let goodsAmount = 0
            this.orderGoodsList.forEach(item =>{
            goodsAmount += item.sell_price * item.buycount
        })
        this.order.goodsAmount = goodsAmount
        return goodsAmount

        },
        //获取总数量
        getTotalCount(){
            let totalCount = 0
            this.orderGoodsList.forEach(item =>{
                totalCount += item.buycount
            })
            return totalCount
        },

  },
  created() {
      //2.1  当再进入这个页面时, 将本地保存的已填写的数据重新填入
    //   this.order.accept_name = localStorage.getItem("accept_name")
      this.getOrderGoodsListData()
  },
  //跳转之前
  beforeDestory(){
    //   if(!this.isSubmit){
        //   说明保存未提交
        // 做个示例, 只保存一个
        //2.当没有点击立即提交时 , 将表格数据保存在本地仓库中
        // localStorage.setItem("accept_name",this.order.accept_name)
    //   }
  },
  methods: {
      //获取下单时候的商品信息
      getOrderGoodsListData(){
            const url = `site/validate/order/getgoodslist/${this.$route.params.ids}`

            const localGoods = getLocalGoods()

            this.$axios.get(url).then(response => {
                //给order的goodsisd 设置值
                this.order.goodsids = this.$route.params.ids
                //给order的cargoodsobj设置值
                this.order.cargoodsobj = {}

                response.data.message.forEach(item => {
                    item.buycount = localGoods[item.id]

                    //给this.order.cargoodsobj赋值
                    this.order.cargoodsobj[item.id] = item.buycount
                })
                this.orderGoodsList = response.data.message
                console.log('11111111111111111111111111111111111111111111111')
                console.log(this.orderGoodsList)
            })
      },
      selectedArea(data){
          //data为默认值
        //   console.log(data)
        this.order.area = data;
      },
      expressChange(label){
          console.log(label)
          //将快递的的label值传给服务器
          this.order.express_id = label
          switch(label){
            case '1':
                this.order.expressMoment = 20;
                break;
            case '2':
                this.order.expressMoment = 15;
                break;
            case '3':
                this.order.expressMoment = 8;
                break;
            default:
                break;
        }
      },
      goToPay(){
            this.$refs.orderForm.validate((valid) => {
            if (valid) {
                // console.log('submit!');
                // console.log(order)
                //3. 如果验证通过
                const url = "site/validate/order/setorder"
                this.$axios.post(url,this.order).then(response =>{
                    if(response.data.status == 1){
                        //失败
                        this.$message.error(response.data.message)
                        return
                    }

                    // 1. 提交订单后 , 清理localStorage 中已经下过单的商品
                    //87,92 分割
                    // const goodsids = this.$route.params.ids.split(',')
                    // this.$store.commit('deleteGoodsByIds',goodsids)

                    // 2. 重新统计购物车徽标中的总数

                    // 3. 成功之后 ,通过编程时导航 , 跳转到支付组件中去 , 还要带上,订单id
                        //成功
                        //3-1. 通过编程时导航,跳转到支付组件中去
                    this.$router.push({path:`/site/payOrder/${response.data.message["orderid"]}`})
                })
            } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
  }
};
</script>
